<template>
  <n-card @click="handleSelect"
          ref="target"
          hoverable
          :embedded="item.id===curSession.id"
          class="cursor-pointer">
    <div v-if="item.id===curSession.id" class="absolute -top-1 -left-1">
          <span class="relative flex h-3 w-3">
            <span class="absolute inline-flex h-full w-full rounded-full bg-green-400 opacity-75"></span>
          <span class="relative inline-flex rounded-full h-3 w-3 bg-green-500"></span>
        </span>
    </div>
    <div v-if="item.isReplying" class="absolute -top-1 -left-1">
          <span class="relative flex h-3 w-3">
            <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-orange-400 opacity-75"></span>
          <span class="relative inline-flex rounded-full h-3 w-3 bg-orange-500"></span>
        </span>
    </div>
    <header class="flex justify-between">
      <h3 class="truncate">{{ item.title }}</h3>
      <div v-show="!isOutside">
        <n-button @click.stop="handleRemove" text>
          <TextIcon icon="mdi:remove"></TextIcon>
        </n-button>
      </div>
    </header>

    <footer class="flex justify-between text-gray-400 text-sm">
      <div>
        {{ dayjs(item.createdAt).format('M-D H:m') }}
      </div>
      <div v-if="item.messages.length">
        {{ item.messages.length }}条对话
      </div>
    </footer>
  </n-card>
</template>

<script setup lang="ts">

import TextIcon from "@/components/pc/icon/TextIcon.vue";
import {onMounted, PropType, ref} from "vue";
import {useMouseInElement} from "@vueuse/core";
import dayjs from "@/utils/dayjs";
import {useAiStore} from "@/store";
import {storeToRefs} from "pinia";

const aiStore = useAiStore()
const {curSession} = storeToRefs(aiStore)
const target = ref(null)

const {isOutside} = useMouseInElement(target)
const props = defineProps({
  item: {
    type: Object as PropType<IAiSession>,
    default: () => ({})
  }
})

onMounted(()=>{

})

window.addEventListener('beforeunload', () => {
  props.item.isReplying = false
})
const handleSelect = () => {
  curSession.value = props.item
}

const handleRemove = () => {
  aiStore.removeSession(props.item)
}
</script>

<style scoped>

</style>